<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style type="text/css">
    .add_role{
        display: inline-block;
        width: 100px;
        height: 28px;
        line-height: 26px;
        text-align: center;
        border: 1px solid blue;
        border-radius: 4px;
        margin-left: 20px;
        cursor: pointer;
    }
</style>
<js file="__PUBLIC__/jquery-1.8.0.min.js"/>
<script type="text/javascript">
   $(function (){
       $('.add_role').click(function (){
           var obj=$(this).parents('tr').clone();
           obj.find('.add_role').remove();
           $('#last').before(obj);
       })
   })
</script>
<body>
<form action="{:U('addUserHandle');}" method="post">
<table class="table">
    <tr>
        <th colspan="2">添加用户</th>
    </tr>
    <tr>
        <td align="right" width="45%">用户账号</td>
        <td>
            <input type="text" name="username"/>
        </td>
    </tr>
    <tr>
        <td align="right">密码</td>
        <td>
            <input type="password" name="password"/>
        </td>
    </tr>
    <tr>
        <td align="right">所属角色</td>
        <td>
            <select name="role_id[]">
                <option value="">请选择角色</option>
                <foreach name="role" item="v">
                <if condition="$v['status']">  <option value="{$v['id']}">{$v.name}({$v.remark})</option>
                </if>
                </foreach>
            </select>
            <span class="add_role">添加一个角色</span>
        </td>
    </tr>
    <tr id="last">
        <td colspan="2" align="right">
            <input type="submit" name="保存添加"/>
        </td>
    </tr>
</table>
</form>
</body>
</html>